<template>
	<el-dialog v-model="dialogVisible" title="版本号查询" width="430" class="qc-custom-dialog" @close="dialogClose()">
		<el-scrollbar>
			<div class="code-info">
				<el-form ref="paramQueryRef" :model="ruleForm" label-width="80px" class="edit-form-wrap">
					<el-form-item label="电桩编码" class="bottom-wrap">
						<div>{{ ruleForm.equipmentCode }}</div>
					</el-form-item>
					<el-form-item label="升级版本" class="bottom-wrap">
						<div>{{ruleForm.equVersion}}</div>
					</el-form-item>
				</el-form>
			</div>
		</el-scrollbar>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="hide">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="dialog-price">
	import { FormInstance } from 'element-plus';
	import { reactive, ref } from 'vue';
	import { paramQuery, getParam } from '@/service/apis/pile';

	let timer :any;
	let dialogVisible = ref(false);
	const paramQueryRef = ref<FormInstance>();

	const ruleForm = reactive({
		id: '',
		equipmentCode: '',
		equVersion: '',
	});

	// 显示弹框
	const show = (row : any) => {
		ruleForm.id = row.id;
		ruleForm.equipmentCode = row.equipmentCode;
		ruleForm.equVersion = '';
		paramQuery(row);
		timer = setInterval(function () {
			getParam({
				id: ruleForm.id,
				equipmentCode: ruleForm.equipmentCode,
			}).then((res : any) => {
				ruleForm.equVersion = res;
			})
		}, 3000);
		setTimeout(function () {
			clearTimer();
		}, 30000);
		dialogVisible.value = true;
	};
	// 关闭弹框
	const hide = () => {
		dialogVisible.value = false;
	};
	// 销毁定时器
	const clearTimer = () => {
		clearTimeout(timer);
	};
	
	const dialogClose = () =>{
		clearTimer();
	}

	defineExpose({
		show,
	});
</script>

<style lang="scss" scoped>
	.code-info {
		max-height: 50vh;
	}
</style>